import React, { Component } from 'react';
import {InputItem ,Button ,Toast} from 'antd-mobile';
import { cardSetUser } from './actions';

import styles from './qrcard.css'

import { getUserToken,getQrCardDetail,getQrCard } from './actions';


class QRCard extends Component {

    constructor(props){
        super(props);
        this.state = {
            time:120,
            money:0,
        }
    }

    componentDidMount(){

        let id = this.props.match.params.id;

        getUserToken((token) => {
           console.log(token);
        });

        getQrCardDetail(id).then(((data) => {
            this.setState({
                money:data.money
            })
            console.log(data);
        }))

        this.state.timer=setInterval(()=>{

            //需要定时执行的方法
            if (this.state.time > 0){
                let newTime = this.state.time -1 ;

                this.setState({
                    time:newTime
                })
            }else{
                clearInterval(this.state.timer);
            }
        }, 1000)

    }

    componentWillMount(){
        if(this.state.timer!= null) {
            clearInterval(this.state.timer);
        }
    }

    submit = () => {

        if (this.state.time == 0){
            Toast.info('领取失效，请重新扫描二维码')
            return;
        }

        let id = this.props.match.params.id;

        getQrCard(id).then((data) => {
            Toast.info('领取成功')
            this.props.history.push('/me')
        })
    }

    render(){
        return <div style={{padding:10,margin:10,backgroundColor:'white'}}>
                <div className={styles.title}>
                    领取{this.state.money/100}元红包
                </div>
                <div className={styles.inputContainer}>
                {this.state.time == 0 ?
                "请重新扫描二维码领取"
                    :
                    `请在${this.state.time}秒内完成领取`
                }
                </div>
                <Button onClick={() => {this.submit()}}  style={{marginTop:'20px', marginBottom:'10px'}} type="primary">领  取</Button>
        </div>
    }

}

export default QRCard;